<template>
  <div>
    <!-- 抬头 -->
    <van-nav-bar fixed title="黑马优购" left-text="返回" left-arrow style="color: #fff" @click-left="onClickLeft"></van-nav-bar>
    <!-- 显示区域 -->
    <van-row class="talk_con2">
      <van-col class="talk_show" id="words">
        <!-- 根据vue对象中的数组，遍历出对应的标签。 -->
        <van-row>
          <van-col
            v-for="(item,i) in arr"
            :class="item.person=='组长说'?'atalk':'btalk'"
            :key="i"
            span="24"
          >
            <span>{{ item.person }}：{{ item.words }}</span>
          </van-col>
        </van-row>
      </van-col>
      <!-- 发送内容区域 -->
      <van-row class="talk_input">
        <!-- 选项: 带有selected的选项,的value值和select标签共享 -->
        <van-col span="6">
          <select class="whotalk" id="who" v-model="str1">
            <option value="0">组长说：</option>
            <option value="1">许龙说：</option>
          </select>
          <!-- <van-dropdown-menu class="whotalk" id="who" v-model="str1" :overlay='flase'>
            <van-dropdown-item v-model="value1" :options="option1" />
          </van-dropdown-menu>-->
        </van-col>
        <van-col span="8">
          <!-- 请输入内容 -->
          <input type="text" class="talk_word" id="talkwords" v-model="str2" />
        </van-col>
        <van-col span="4">
          <!-- 按钮 -->
          <input type="button" value="发送" class="talk_sub" id="talksub" @click="add_data()" />
        </van-col>
      </van-row>
    </van-row>
  </div>
</template>

<script>
export default {
  name: "talk_con",
  data() {
    return {
      arr: [
        { person: "组长说", words: "页面敲完了吗？" },
        { person: "许龙说", words: "还差一点" }
      ],
      str1: "0",
      str2: "",
      value1: 0,
      option1: [{ text: "组长说", value: 0 }, { text: "许龙说", value: 1 }]
    };
  },
  methods: {
    add_data: function() {
      // bug: 内容不能为空。
      if (this.str2 == "") {
        alert("请输入内容...");
        return;
      }
      const p = this.str1 == "0" ? "组长说" : "许龙说";
      const obj = { person: p, words: this.str2 };
      this.arr.push(obj);

      // 添加完内容，清空
      this.str2 = "";
    },
    onClickLeft() {
      this.$router.go(-1);
    }
  },
  created() {
    this.$store.commit("setIfShow", false);
  }
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  margin-bottom: 50px;
}
.talk_con1 {
  height: 500px;
  border: 1px solid #666;
  margin: 30px;
  float: left;
  background: #e98080;
}

.talk_con2 {
  height: 500px;
  border: 1px solid #666;
  margin: 30px;
  margin-top: 50px;
  float: right;
  background: #f84946;
}
.talk_show {
  height: 420px;
  border: 1px solid #666;
  background: #fff;
  margin: 10px auto 0;
  overflow: auto;
}
.talk_input {
  margin: 10px auto 0;
}
.whotalk {
  width: 80px;
  height: 30px;
  float: left;
  outline: none;
  option {
    width: 20px;
    height: 10px;
  }
}

.talk_word {
  height: 26px;
  padding: 0px;
  float: left;
  margin-left: 6px;
  outline: none;
  text-indent: 10px;
}
.talk_sub {
  /* width: 56px; */
  height: 30px;
  /* float: left; */
  text-align: right;
  margin-left: 81px;
}
.atalk {
  margin: 10px;
  text-align: right;
}
.atalk span {
  display: inline-block;
  background: #ccc;
  border-radius: 10px;
  color: #fff;
  padding: 5px 10px;
}
.btalk {
  margin: 10px;
  /* text-align: right; */
}
.btalk span {
  display: inline-block;
  background: #f84946;
  border-radius: 10px;
  color: #fff;
  padding: 5px 10px;
}
.van-dropdown-item {
  width: 20px;
}
.van-cell {
  width: 50px;
}
</style>